<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>基于AngularJS和SVG技术的图表组件</title>
	<link href="./framework/zui-1.4.0/css/zui.css" rel="stylesheet">
	<link rel="stylesheet" href="./framework/colorpicker/css/colorpicker.css" type="text/css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./framework/colorpicker/css/layout.css" />
	<style type="text/css">
	   path:hover,circle:hover{
	       opacity:0.7;
	   }
	</style>
</head>

<body style="width:1808px;font-family: 'YaHei Consolas Hybrid';" ng-app="myApp" ng-controller="controller3 as ctrl">

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="text-align: center;"><h1>基于AngularJS和SVG技术的图表组件</h1></div>
        <div class="col-md-1"></div>
    </div>

    <div class="row" style="margin-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="height: 42px;">
            <nav class="navbar navbar-default" role="navigation">
                <ul class="nav navbar-nav nav-justified">
                  <li><a href="./index.html">二维线性图</a></li>
                  <li><a href="./index2.html">二维柱状图</a></li>
                  <li class="active"><a href="./index3.html">二维饼状图</a></li>
                </ul>
            </nav>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <button  id='editorBtn' type="button" class="btn btn-mini" onclick="editTitle()"style="float: right;">编辑图表标题</button>
            <div id="chartTitle">图表标题</div>
            <div id='editorDiv' style="display: none;">
            <textarea id='editor' name='content' style='width:100%;'>图表标题</textarea>
            <button style="float: right;" type="button" class="btn btn-mini" onclick="editTitleSubmit()">确认编辑</button>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <svg style="height:500px;width:100%;" version='1.1' xmlns='http://www.w3.org/2000/svg'>
                <circle onclick="changeOpacity(this)" ng-if="ctrl.pieCount<2" ng-repeat="i in ctrl.pies[3]" cx="750" cy="250" r="250" stroke="black" stroke-width="0" fill="{{ctrl.pies[2][$index]}}" style="cursor:pointer;"/>
                <path onclick="changeOpacity(this)" ng-if="ctrl.pieCount>1" ng-repeat="i in ctrl.pies[1]" d="{{i}}" style="fill:{{ctrl.pies[2][$index]}};cursor:pointer;"/>
                <text ng-if="ctrl.dataShown=='是'" ng-repeat="i in ctrl.pies[4]" x="{{i[0]}}" y="{{i[1]}}" font-size="15">{{ctrl.pies[3][$index]}}：{{ctrl.pies[0][$index]}}，{{ctrl.pies[5][$index]}}</text>
            </svg>
        </div>
        <div class="col-md-1"></div>
    </div>

    <div class="row" style="padding-bottom: 5px;padding-top: 5px;">
       <div class="col-md-1"></div>
       <div class="col-md-10">
           <button ng-click="ctrl.showDemo()" type="button" class="btn btn-mini btn-success"style="float: right;margin-left: 5px;">演示数据</button>
       </div>
       <div class="col-md-1"></div>
    </div>
        
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div style="float: left;margin-top: 5px;"><label>添加数据：</label>数据名：</div>
            <input class="form-control" type="text" ng-model="ctrl.name" style="width:100px;float: left;text-align: center;">
            <div style="float: left;margin-top: 5px;">&nbsp;数据值：</div>
            <input class="form-control" type="text" ng-model="ctrl.value" style="width:50px;float: left;text-align: center;">
            <div style="float: left;margin-left: 5px;"><button class="btn" ng-click="ctrl.addPie()">添加</button></div>
        </div>
        <div class="col-md-1"></div>
    </div>
	            
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div style="float: left;">
                当前数据块颜色：<label>{{ctrl.color}}</label>，更改为：
                <button ng-click="ctrl.changeColor('blue')" class="btn btn-primary">blue</button>
                <button ng-click="ctrl.changeColor('cyan')" class="btn btn-info">cyan</button>
                <button ng-click="ctrl.changeColor('green')" class="btn btn-success">green</button>
                <button ng-click="ctrl.changeColor('orange')" class="btn btn-warning">orange</button>
                <button ng-click="ctrl.changeColor('red')" class="btn btn-danger">red</button>
                其它：
            </div>
            <div id="colorSelector"><div style="background-color: blue;"></div></div>
            <button ng-click="ctrl.changeColor('other')" class="btn" style="margin-left: 5px;">确认选择</button>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            是否显示数据值与所占百分比：<label>{{ctrl.dataShown}}</label>，
            <button ng-click="ctrl.changeDataShown()" class="btn">更改</button>
        </div>
        <div class="col-md-1"></div>
    </div>

	<div class="row" style="padding-bottom: 5px;">
	   <div class="col-md-1"></div>
        <div class="col-md-10">
            <button style="float:right;" type="button" class="btn btn-lg" data-backdrop="false" data-moveable="true" data-toggle="modal" data-target="#legends">查看图例</button>
        </div>
        <div class="col-md-1"></div>
    </div>

    <!-- 图例对话框，不点按钮时不会显示 -->
	<div id="legends" class="modal fade">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
					</button>
					<h3 class="modal-title">图例</h3>
				</div>
				<div class="modal-body">
					<div class="list-group">
						<a ng-repeat="i in ctrl.pies[3]" href="#" class="list-group-item" style="height:70px;">
						    <h4>{{i}}:颜色{{ctrl.pies[2][$index]}}</h4>
			                <svg style="height:100%;width:100%;" version='1.1' xmlns='http://www.w3.org/2000/svg'>
			                    <line x1='0' y1='0' x2='100%' y2='0' style="fill:none;stroke:{{ctrl.pies[2][$index]}};stroke-width:5"/>
			                </svg>
						</a>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script src="./framework/jquery-1.12.0.min.js"></script>
    <script src="./framework/zui-1.4.0/js/zui.js"></script>
    <script src="./framework/angular-1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/eye.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/utils.js"></script>
    <script charset="utf-8" src="./framework/kindeditor-4.1.10/kindeditor.js"></script>
    <script charset="utf-8" src="./framework/kindeditor-4.1.10/lang/zh_CN.js"></script>    
    <script src="./js/app.js"></script>  
    <script src="./js/controllers.js"></script>
    
</body>
</html>